import {
  Box,
  Button,
  Group,
  NumberInput,
  Text,
  TextInput,
} from "@mantine/core";
import { modals } from "@mantine/modals";
import { useState } from "react";

function openDefaultConfirmModal({
  title = "此操作不可撤销,确定吗？",
  onConfirm,
}) {
  modals.openConfirmModal({
    title: "提示",
    centered: true,
    children: <Text size="md">{title}</Text>,
    labels: { confirm: "确定", cancel: "等一下" },
    onCancel: () => console.log("Cancel"),
    onConfirm: () => {
      onConfirm(), modals.closeAll();
    },
  });
}

function openPromptModal(props) {
  modals.open({
    title: props.title,
    centered: true,
    children: <Prompt onConfirm={props.onConfirm} type={props.type} />,
    labels: { confirm: "确定", cancel: "等一下" },
  });
}

function Prompt({ onConfirm, type }) {
  const [text, setText] = useState("");

  return (
    <Box w="96%" mx="auto">
      {type === "positive-decimal" && (
        <NumberInput
          min={0} // 限制最小值为 1
          step={0.01} // 每次增加或减少为 1
          precision={2} // 精度为 0，确保只能输入两位
          value={text}
          onChange={setText}
        />
      )}

      {type === "positive-int" && (
        <NumberInput
          min={1} // 限制最小值为 1
          step={1} // 每次增加或减少为 1
          precision={0} // 精度为 0，确保只能输入整数
          value={text}
          onChange={setText}
        />
      )}

      {!type && (
        <TextInput value={text} onChange={(e) => setText(e.target.value)} />
      )}

      <Group justify="flex-end" mt="md">
        <Button
          onClick={() => {
            onConfirm(text);
            modals.closeAll();
          }}
        >
          确定
        </Button>
      </Group>
    </Box>
  );
}

function openDemoNotSupportModal() {
  modals.open({
    title: <Text size="sm">提示</Text>,
    centered: true,
    children: "该功能正在开发中",
  });
}

const moreModals = {
  openDefaultConfirmModal,
  openPromptModal,
  openDemoNotSupportModal,
};

export { moreModals };
